<template>
  <!-- 催收执行页-案件信息模块-案件信息 -->
  <section class="component case-info">
    <!-- 案件信息 -->
    <el-row>
      <div class="circle"></div>
      <span class="circle-title">逾期信息</span>
    </el-row>
    <ul class="info-container">
      <li>
        <span>申请金额</span>
        {{caseInfo.contractInfoApplyAmount}}
      </li>
      <li>
        <span>批准贷款金额</span>
        {{caseInfo.contractInfoLoanAmount}}
      </li>
      <li>
        <span>放款日期</span>
        {{caseInfo.contractInfoLoanDate|dateFormat}}
      </li>
      <li>
        <span>贷款期限</span>
        {{caseInfo.contractInfoLoanTerm|dateFormat}}
      </li>
      <li>
        <span>账单周期</span>
        {{caseInfo.contractInfoBillCycle}}
      </li>
      <li>
        <span>还款日</span>
        {{caseInfo.contractInfoPayDate|dateFormat}}
      </li>
      <li>
        <span>每月还款额</span>
        {{caseInfo.contractInfoMonthPayAmount}}
      </li>
      <li>
        <span>欠款金额</span>
        {{caseInfo.overdueAmount}}
      </li>
      <li>
        <span>逾期本金</span>
        {{caseInfo.overdueCapital}}
      </li>
      <li>
        <span>逾期利息</span>
        {{caseInfo.overdueInterest}}
      </li>
      <li>
        <span>逾期期数</span>
        {{caseInfo.overduePeriod?`M${caseInfo.overduePeriod}`:''}}
      </li>
      <li>
        <span>逾期天数</span>
        {{caseInfo.overdueDays}}
      </li>
      <li>
        <span>未结罚息</span>
        {{caseInfo.unboundFine}}
      </li>
      <li>
        <span>未结利息</span>
        {{caseInfo.unboundInterest}}
      </li>
      <li>
        <span>已还款期数</span>
        {{caseInfo.hasPayPeriods}}
      </li>
      <li>
        <span>还款方式</span>
        {{caseInfo.contractInfoPayWay|dictConvert('PayWay')}}
      </li>
      <li>
        <span>年利率</span>
        {{caseInfo.contractInfoYearRate}}
      </li>
      <li>
        <span>罚息利率</span>
        {{caseInfo.contractInfoPenaltyRate}}
      </li>
      <li>
        <span>提前还款违约金费率</span>
        {{caseInfo.contractInfoDamageRate}}
      </li>
      <li>
        <span>分期服务费费率</span>
        {{caseInfo.contractInfoServiceRate}}
      </li>
      <li>
        <span>贷款类型</span>
        {{caseInfo.contractInfoLoanType}}
      </li>
      <li>
        <span>进入催收日期</span>
        {{caseInfo.followInTime | dateFormat}}
      </li>
      <li>
        <span>永久催收员</span>
        {{caseInfo.caseInfoRecordCurrentCollectorRealName}}
      </li>
      <li>
        <span>临时催收员真实姓名</span>
        {{caseInfo.caseInfoRecordTempCollectorRealName}}
      </li>
      <li>
        <span>临时案件到期日</span>
        {{caseInfo.caseInfoRecordTempEndDate}}
      </li>
      <li>
        <span>食言次数累计</span>
        {{caseInfo.caseInfoRecordCheatTimes}}
      </li>
      <li>
        <span>是否共债</span>
        {{caseInfo.caseInfoRecordIsSameCase?(caseInfo.caseInfoRecordIsSameCase=== 'DISABLED'?'否':'是'):''}}
      </li>
      <li>
        <span>共债总额</span>
        {{caseInfo.caseInfoRecordSameCaseAmount}}
      </li>
      <li>
        <span>黑名单标记</span>
        {{caseInfo.caseInfoRecordBlackFlag}}
      </li>
      <li>
        <span>是否协催</span>
        {{caseInfo.caseInfoRecordAssistFlag?(caseInfo.caseInfoRecordAssistFlag==='DISABLED'?'否':'是'):''}}
      </li>
      <li>
        <span>协催人员真实姓名</span>
        {{caseInfo.caseInfoRecordAssistCollectorRealName}}
      </li>
      <li>
        <span>诉讼阶段</span>
        {{caseInfo.caseInfoRecordLawPhase}}
      </li>
      <li>
        <span>反欺诈结果</span>
        {{caseInfo.caseInfoRecordUnCheatResult|dictConvert('SurveyResults')}}
      </li>
      <li>
        <span>是否信修共享</span>
        {{caseInfo.caseInfoRecordisRepairShare?(caseInfo.caseInfoRecordisRepairShare=== 'DISABLED'?'否':'是'):''}}
      </li>
      <li>
        <span>信修共享时间</span>
        {{caseInfo.caseInfoRecordRepairShareTime|dateFormat}}
      </li>
      <li>
        <span>是否抢案共享</span>
        {{caseInfo.caseInfoRecordIsRobShare?(caseInfo.caseInfoRecordIsRobShare === 'DISABLED'?'否':'是'):''}}
      </li>
      <li>
        <span>锁定催收员真实姓名</span>
        {{caseInfo.caseInfoRecordLockCollectorRealName}}
      </li>
    </ul>
  </section>
</template>

<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";
import { Dependencies } from "~/core/decorator";
import { CaseOperatorPageService } from "~/services/domain-service/case-operator-page.service";
import { DataImportExcelInfoService } from "~/services/dataimp-service/data-import-excel-info.service";
import { DataGrid, DataGridItem } from "@zct1989/vue-component";

import { Prop } from "vue-property-decorator";
import { CASE_CHANNEL, MENU_CHANNEL } from "~/config/enum.config";
import { namespace } from "vuex-class";

const CollectionExecutionModule = namespace("collection-execution");

@Component({
  components: {
    DataGrid,
    DataGridItem
  }
})
export default class CaseInfo extends Vue {
  @Dependencies(CaseOperatorPageService)
  private caseOperatorPageService: CaseOperatorPageService;
  @Dependencies(DataImportExcelInfoService)
  private dataImportExcelInfoService: DataImportExcelInfoService;
  private caseInfo: any = {};

  @CollectionExecutionModule.State private menuChannel;

  @CollectionExecutionModule.State private caseId: string;

  private activated() {
    this.refreshData();
  }

  private refreshData() {
    if (this.menuChannel === MENU_CHANNEL.Case_imported) {
      this.dataImportExcelInfoService
        .getImportCaseInfo(this.caseId)
        .subscribe(data => {
          this.caseInfo = data;
        });
    } else {
      this.caseOperatorPageService
        .queryCaseInfo(this.caseId)
        .subscribe(data => {
          this.caseInfo = data;
        });
    }
  }
}
</script>

<style lang="less" scoped>
.component.case-info {
  .circle {
    display: inline-block;
    width: 5px;
    height: 5px;
    margin-left: 15px;
    margin-right: 5px;
    background-color: #28313e;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    vertical-align: middle;
  }

  .circle-title {
    font-size: 14px;
    line-height: 13px;
    color: #28313e;
  }
  .info-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, 300px);
    grid-column-gap: 5px;
    grid-row-gap: 2px;
    list-style: none;
    li {
      > :first-child {
        color: #606266;
        &:after {
          content: "：";
        }
      }
    }
  }
}
</style>
